import buyFailed from '@/giftCardSubPack/images/giftCard/buyFailed.png';
import buySuccess from '@/giftCardSubPack/images/giftCard/buySuccess.png';
import { Image, View } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import React from 'react';
import { connect } from 'react-redux';
import './index.scss';

const Success = ({ price, appConfig }) => {
  const goToMyGiftCard = () => {
    Taro.redirectTo({ url: '/giftCardSubPack/giftCardOrderList/index' });
  };

  return (
    <>
      <View className="giftCardBuyResult">
        <View className="result">
          <Image className="status" src={buySuccess}></Image>
          <View className="text">购买成功</View>
          <View className="remark">
            1张（¥{price}）{appConfig?.name}券已进入您的账户
          </View>

          <View className="status-button customePageBackgroundStyle" onClick={goToMyGiftCard}>
            <View className="button-text">立即查看</View>
          </View>
        </View>
      </View>
    </>
  );
};

const Failed = ({ price, appConfig }) => {
  const goToCardShop = () => {
    Taro.redirectTo({ url: '/giftCardSubPack/giftCardShop/index' });
  };

  return (
    <>
      <View className="giftCardBuyResult">
        <View className="result">
          <Image className="status" src={buyFailed}></Image>
          <View className="text">购买失败</View>
          <View className="remark">
            1张（¥{price}）{appConfig?.name}券购买失败
          </View>

          <View className="status-button customePageBackgroundStyle" onClick={goToCardShop}>
            <View className="button-text">重新购买</View>
          </View>
        </View>
      </View>
    </>
  );
};

const GiftCardBuyResult = ({ appConfig }) => {
  const { params } = useRouter();
  const { price, success } = params;

  return (
    <>
      {success ? (
        <Success price={price} appConfig={appConfig}></Success>
      ) : (
        <Failed price={price} appConfig={appConfig}></Failed>
      )}
    </>
  );
};

export default connect(({ otherApi }) => ({
  appConfig: otherApi.appConfig,
}))(GiftCardBuyResult);
